<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能诊疗预约平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <i class="fa fa-heartbeat text-primary text-3xl mr-2"></i>
                    <span class="text-xl font-bold text-primary">健康桥</span>
                </a>
                <nav class="hidden md:ml-10 md:flex space-x-8">
                    <a href="#home" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">首页</a>
                    <a href="#departments" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">科室导航</a>
                    <a href="#doctors" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">医生团队</a>
                    <a href="#appointment" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">预约挂号</a>
                    <a href="#about" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">关于我们</a>
                </nav>
            </div>
            <div class="flex items-center">
                <div class="hidden md:block">
                    <div class="flex items-center">
                        <button id="loginBtn" class="mr-3 px-4 py-2 rounded-md text-sm font-medium text-primary border border-primary hover:bg-primary/5 transition-colors">
                            登录
                        </button>
                        <button id="registerBtn" class="px-4 py-2 rounded-md text-sm font-medium text-white bg-primary hover:bg-primary/90 transition-colors">
                            注册
                        </button>
                    </div>
                </div>
                <div class="md:hidden">
                    <button id="mobileMenuBtn" class="text-gray-700 hover:text-primary focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
                <button class="flex-1 px-4 py-2 rounded-md text-sm font-medium text-primary border border-primary hover:bg-primary/5 transition-colors">
                    登录
                </button>
                <button class="flex-1 px-4 py-2 rounded-md text-sm font-medium text-white bg-primary hover:bg-primary/90 transition-colors">
                    注册
                </button>
            </div>
</header>

<!-- 登录/注册模态框 -->
<div id="authModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
    <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm" id="modalOverlay"></div>
    <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden transform transition-all">
        <div class="flex">
            <button id="loginTab" class="flex-1 py-4 text-center font-medium text-primary border-b-2 border-primary">登录</button>
            <button id="registerTab" class="flex-1 py-4 text-center font-medium text-gray-500 border-b-2 border-transparent">注册</button>
        </div>

        <!-- 登录表单 -->
        <div id="loginForm" class="p-6">
            <div class="mb-4">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fa fa-phone text-gray-400"></i>
                    </div>
                    <input type="tel" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="手机号">
                </div>
            </div>
            <div class="mb-6">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fa fa-lock text-gray-400"></i>
                    </div>
                    <input type="password" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="验证码">
                    <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-primary">获取验证码</button>
                </div>
            </div>
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <input id="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                    <label for="remember-me" class="ml-2 block text-sm text-gray-900">记住我</label>
                </div>
                <div class="text-sm">
                    <a href="#" class="font-medium text-primary hover:text-primary/80">忘记密码?</a>
                </div>
            </div>
            <div>
                <button class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all">
                    登录
                </button>
                <div class="mt-4 text-center text-sm text-gray-500">
                    其他登录方式
                </div>
                <div class="mt-4 flex justify-center space-x-4">
                    <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
                        <i class="fa fa-weixin text-green-600 text-xl"></i>
                    </button>
                    <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
                        <i class="fa fa-qq text-blue-500 text-xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 注册表单 -->
        <div id="registerForm" class="p-6 hidden">
            <div class="mb-4">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fa fa-user text-gray-400"></i>
                    </div>
                    <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="姓名">
                </div>
            </div>
            <div class="mb-4">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fa fa-phone text-gray-400"></i>
                    </div>
                    <input type="tel" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="手机号">
                </div>
            </div>
            <div class="mb-4">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fa fa-id-card text-gray-400"></i>
                    </div>
                    <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="身份证号">
                </div>
            </div>
            <div class="mb-6">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fa fa-lock text-gray-400"></i>
                    </div>
                    <input type="password" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="验证码">
                    <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-primary">获取验证码</button>
                </div>
            </div>
            <div class="flex items-center mb-6">
                <input id="agreement" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                <label for="agreement" class="ml-2 block text-sm text-gray-900">
                    我已阅读并同意<a href="#" class="text-primary">用户协议</a>和<a href="#" class="text-primary">隐私政策</a>
                </label>
            </div>
            <div>
                <button class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all">
                    注册并登录
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 主内容区域 -->
<main>
    <!-- 英雄区域 -->
    <section id="home" class="pt-24 pb-16 bg-gradient-to-br from-primary/10 to-secondary/10">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="w-full lg:w-1/2 mb-10 lg:mb-0">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark">
                        便捷医疗，<br>
                        <span class="text-primary">一键预约</span>
                    </h1>
                    <p class="mt-4 text-gray-600 text-lg max-w-xl">
                        告别排队等待，轻松预约专家号，实时查看就诊进度，让医疗服务更高效、更贴心。
                    </p>
                    <div class="mt-8 flex flex-col sm:flex-row gap-4">
                        <button class="px-8 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20 hover-scale">
                            立即预约
                        </button>
                        <button class="px-8 py-3 bg-white text-primary border border-primary rounded-lg font-medium hover:bg-primary/5 transition-colors hover-scale">
                            了解更多
                        </button>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 relative">
                    <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl hover-scale">
                        <img src="https://picsum.photos/800/600?random=1" alt="医疗预约平台界面" class="w-full h-auto">
                    </div>
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-secondary/20 rounded-full -z-10 blur-3xl"></div>
                    <div class="absolute -top-6 -left-6 w-32 h-32 bg-primary/20 rounded-full -z-10 blur-3xl"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 科室导航 -->
    <section id="departments" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">科室导航</h2>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                    我们提供全面的医疗科室服务，覆盖常见疾病与专科诊疗需求，由经验丰富的医生团队为您提供专业诊疗服务。
                </p>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
                <!-- 科室卡片 -->
                <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-heartbeat text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">心内科</h3>
                    <p class="text-gray-500 text-sm">心脏疾病诊疗</p>
                    <div class="mt-4 text-primary text-sm">
                        <span>12位专家</span>
                        <i class="fa fa-arrow-right ml-1"></i>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-stethoscope text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">呼吸科</h3>
                    <p class="text-gray-500 text-sm">肺部疾病诊疗</p>
                    <div class="mt-4 text-primary text-sm">
                        <span>9位专家</span>
                        <i class="fa fa-arrow-right ml-1"></i>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-medkit text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">消化科</h3>
                    <p class="text-gray-500 text-sm">胃肠疾病诊疗</p>
                    <div class="mt-4 text-primary text-sm">
                        <span>11位专家</span>
                        <i class="fa fa-arrow-right ml-1"></i>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-eye text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">眼科</h3>
                    <p class="text-gray-500 text-sm">眼部疾病诊疗</p>
                    <div class="mt-4 text-primary text-sm">
                        <span>8位专家</span>
                        <i class="fa fa-arrow-right ml-1"></i>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-user-md text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">骨科</h3>
                    <p class="text-gray-500 text-sm">骨骼疾病诊疗</p>
                    <div class="mt-4 text-primary text-sm">
                        <span>10位专家</span>
                        <i class="fa fa-arrow-right ml-1"></i>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-child text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">儿科</h3>
                    <p class="text-gray-500 text-sm">儿童疾病诊疗</p>
                    <div class="mt-4 text-primary text-sm">
                        <span>15位专家</span>
                        <i class="fa fa-arrow-right ml-1"></i>
                    </div>
                </div>
            </div>

            <div class="mt-10 text-center">
                <button class="px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors">
                    查看全部科室 <i class="fa fa-angle-right ml-1"></i>
                </button>
            </div>
        </div>
    </section>


    <!-- 医生团队 -->
    <section id="doctors" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">专家团队</h2>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                    我们拥有一支经验丰富、专业精湛的医疗团队，致力于为您提供最优质的医疗服务。
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 医生卡片 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow hover-scale">
                    <div class="relative">
                        <img src="https://picsum.photos/400/300?random=2" alt="张医生" class="w-full h-64 object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                            <h3 class="text-white font-semibold text-xl">张医生</h3>
                            <p class="text-white/80 text-sm">心内科 | 主任医师</p>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="flex">
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star-half-o text-yellow-400"></i>
                            </div>
                            <span class="ml-2 text-gray-600 text-sm">4.8 (120评价)</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            从事心血管临床工作20余年，擅长冠心病、心力衰竭、心律失常等疾病的诊断与治疗，曾发表学术论文30余篇。
                        </p>
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">冠心病</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">心力衰竭</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">心律失常</span>
                        </div>
                        <button class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            预约挂号
                        </button>
                    </div>
                </div>

                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow hover-scale">
                    <div class="relative">
                        <img src="https://picsum.photos/400/300?random=3" alt="李医生" class="w-full h-64 object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                            <h3 class="text-white font-semibold text-xl">李医生</h3>
                            <p class="text-white/80 text-sm">呼吸科 | 副主任医师</p>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="flex">
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star-o text-yellow-400"></i>
                            </div>
                            <span class="ml-2 text-gray-600 text-sm">4.2 (98评价)</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            专注于呼吸系统疾病的诊治，特别是慢性阻塞性肺疾病、哮喘和肺部感染性疾病，具有丰富的临床经验和科研能力。
                        </p>
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">COPD</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">哮喘</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">肺炎</span>
                        </div>
                        <button class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            预约挂号
                        </button>
                    </div>
                </div>

                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow hover-scale">
                    <div class="relative">
                        <img src="https://picsum.photos/400/300?random=4" alt="王医生" class="w-full h-64 object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                            <h3 class="text-white font-semibold text-xl">王医生</h3>
                            <p class="text-white/80 text-sm">消化科 | 主任医师</p>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="flex">
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                            </div>
                            <span class="ml-2 text-gray-600 text-sm">4.9 (156评价)</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            消化系统疾病专家，尤其擅长胃肠镜检查与治疗、肝胆胰疾病的诊治，在炎症性肠病方面有深入研究。
                        </p>
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">胃肠镜</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">肝炎</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">胰腺炎</span>
                        </div>
                        <button class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            预约挂号
                        </button>
                    </div>
                </div>
            </div>

            <div class="mt-10 text-center">
                <button class="px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors">
                    查看全部医生 <i class="fa fa-angle-right ml-1"></i>
                </button>
            </div>
        </div>
    </section>
    <!-- 预约流程 -->
    <section id="appointment" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">在线预约</h2>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                    简单几步，轻松完成预约，告别排队等待，享受便捷医疗服务。
                </p>
            </div>

            <div class="bg-gray-50 rounded-2xl p-8 mb-12">
                <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
                    <div class="lg:col-span-3">
                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <h3 class="text-lg font-semibold mb-4">选择科室</h3>
                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                                <button class="px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    心内科
                                </button>
                                <button class="px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    呼吸科
                                </button>
                                <button class="px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    消化科
                                </button>
                                <button class="px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    神经内科
                                </button>
                                <button class="px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    骨科
                                </button>
                                <button class="px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    儿科
                                </button>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <h3 class="text-lg font-semibold mb-4">选择医生</h3>
                            <div class="space-y-4">
                                <div class="flex items-center p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                                    <img src="https://picsum.photos/60/60?random=5" alt="张医生" class="w-14 h-14 rounded-full object-cover">
                                    <div class="ml-4 flex-1">
                                        <div class="flex justify-between">
                                            <h4 class="font-medium">张医生</h4>
                                            <span class="text-sm text-primary">主任医师</span>
                                        </div>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400 text-xs">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <span class="ml-1 text-xs text-gray-500">4.8 (120评价)</span>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">心内科 | 擅长：冠心病、心力衰竭</p>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-sm text-gray-500">￥200</span>
                                        <button class="mt-1 px-3 py-1 bg-primary text-white text-xs rounded-lg hover:bg-primary/90 transition-colors">
                                            预约
                                        </button>
                                    </div>
                                </div>

                                <div class="flex items-center p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                                    <img src="https://picsum.photos/60/60?random=6" alt="李医生" class="w-14 h-14 rounded-full object-cover">
                                    <div class="ml-4 flex-1">
                                        <div class="flex justify-between">
                                            <h4 class="font-medium">李医生</h4>
                                            <span class="text-sm text-primary">副主任医师</span>
                                        </div>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400 text-xs">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-o"></i>
                                            </div>
                                            <span class="ml-1 text-xs text-gray-500">4.2 (98评价)</span>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">心内科 | 擅长：心律失常、高血压</p>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-sm text-gray-500">￥180</span>
                                        <button class="mt-1 px-3 py-1 bg-primary text-white text-xs rounded-lg hover:bg-primary/90 transition-colors">
                                            预约
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold mb-4">选择日期和时间</h3>

                            <!-- 日历视图 -->
                            <div class="mb-6">
                                <div class="flex justify-between items-center mb-4">
                                    <h4 class="font-medium">2025年6月</h4>
                                    <div class="flex space-x-2">
                                        <button class="p-1 rounded-full hover:bg-gray-100 transition-colors">
                                            <i class="fa fa-chevron-left text-gray-500"></i>
                                        </button>
                                        <button class="p-1 rounded-full hover:bg-gray-100 transition-colors">
                                            <i class="fa fa-chevron-right text-gray-500"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="grid grid-cols-7 gap-1 text-center">
                                    <div class="text-gray-500 text-sm py-2">日</div>
                                    <div class="text-gray-500 text-sm py-2">一</div>
                                    <div class="text-gray-500 text-sm py-2">二</div>
                                    <div class="text-gray-500 text-sm py-2">三</div>
                                    <div class="text-gray-500 text-sm py-2">四</div>
                                    <div class="text-gray-500 text-sm py-2">五</div>
                                    <div class="text-gray-500 text-sm py-2">六</div>

                                    <!-- 日期 -->
                                    <div class="py-2 text-gray-300">28</div>
                                    <div class="py-2 text-gray-300">29</div>
                                    <div class="py-2 text-gray-300">30</div>
                                    <div class="py-2 text-gray-300">31</div>
                                    <div class="py-2">1</div>
                                    <div class="py-2">2</div>
                                    <div class="py-2">3</div>

                                    <div class="py-2">4</div>
                                    <div class="py-2">5</div>
                                    <div class="py-2">6</div>
                                    <div class="py-2">7</div>
                                    <div class="py-2">8</div>
                                    <div class="py-2">9</div>
                                    <div class="py-2">10</div>

                                    <div class="py-2">11</div>
                                    <div class="py-2 rounded-full bg-primary/10 text-primary font-medium">12</div>
                                    <div class="py-2">13</div>
                                    <div class="py-2">14</div>
                                    <div class="py-2">15</div>
                                    <div class="py-2">16</div>
                                    <div class="py-2">17</div>

                                    <div class="py-2">18</div>
                                    <div class="py-2">19</div>
                                    <div class="py-2">20</div>
                                    <div class="py-2">21</div>
                                    <div class="py-2">22</div>
                                    <div class="py-2">23</div>
                                    <div class="py-2">24</div>
                                </div>
                            </div>

                            <!-- 时间段选择 -->
                            <h4 class="font-medium mb-3">上午</h4>
                            <div class="grid grid-cols-3 sm:grid-cols-4 gap-2 mb-4">
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    08:30-09:00
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    09:00-09:30
                                </button>
                                <button class="py-2 border border-primary bg-primary/5 text-primary rounded-lg transition-colors text-sm">
                                    09:30-10:00
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    10:00-10:30
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    10:30-11:00
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    11:00-11:30
                                </button>
                                <button class="py-2 border border-gray-400 bg-gray-100 text-gray-400 rounded-lg cursor-not-allowed text-sm">
                                    11:30-12:00
                                </button>
                            </div>

                            <h4 class="font-medium mb-3">下午</h4>
                            <div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    13:30-14:00
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    14:00-14:30
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    14:30-15:00
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    15:00-15:30
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    15:30-16:00
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    16:00-16:30
                                </button>
                                <button class="py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    16:30-17:00
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="lg:col-span-2">
                        <div class="bg-white rounded-xl shadow-sm p-6 sticky top-24">
                            <h3 class="text-lg font-semibold mb-4">预约信息确认</h3>

                            <div class="space-y-4 mb-6">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">科室</span>
                                    <span class="font-medium">心内科</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">医生</span>
                                    <span class="font-medium">张医生</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">日期</span>
                                    <span class="font-medium">2025-06-12</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">时间</span>
                                    <span class="font-medium">09:30-10:00</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">挂号费</span>
                                    <span class="font-medium">￥200</span>
                                </div>
                            </div>

                            <div class="border-t border-gray-100 pt-4 mb-6">
                                <h4 class="font-medium mb-3">患者信息</h4>
                                <div class="space-y-3">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入姓名">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                                        <input type="tel" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入手机号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">身份证号</label>
                                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入身份证号">
                                    </div>
                                </div>
                            </div>

                            <div class="border-t border-gray-100 pt-4 mb-6">
                                <h4 class="font-medium mb-3">支付方式</h4>
                                <div class="grid grid-cols-2 gap-3">
                                    <button class="flex items-center justify-center p-3 border border-primary bg-primary/5 rounded-lg">
                                        <i class="fa fa-weixin text-green-600 text-xl mr-2"></i>
                                        <span>微信支付</span>
                                    </button>
                                    <button class="flex items-center justify-center p-3 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors">
                                        <i class="fa fa-credit-card text-blue-600 text-xl mr-2"></i>
                                        <span>银行卡</span>
                                    </button>
                                </div>
                            </div>

                            <button id="payBtn" class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
                                确认支付￥200
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 支付成功模态框 -->
            <div id="successModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
                <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>
                <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-md mx-4 p-8 text-center">
                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fa fa-check text-green-500 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">支付成功</h3>
                    <p class="text-gray-600 mb-6">您的预约已成功提交，预约号：YY20250612001</p>
                    <div class="flex justify-center space-x-4">
                        <button id="closeSuccessBtn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                            返回首页
                        </button>
                        <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看预约
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 统计分析 -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">医疗数据分析</h2>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                    我们通过大数据分析，为您提供全面的医疗资源使用情况和患者满意度分析。
                </p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold mb-4">各科室预约量分布</h3>
                    <div class="h-80">
                        <canvas id="departmentChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold mb-4">医生工作量统计</h3>
                    <div class="h-80">
                        <canvas id="doctorChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold mb-4">患者满意度分析</h3>
                    <div class="h-80">
                        <canvas id="satisfactionChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold mb-4">高峰时段预测</h3>
                    <div class="h-80">
                        <canvas id="peakHoursChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6">关于我们</h2>
                    <p class="text-gray-600 mb-6">
                        健康桥医疗平台致力于为患者提供便捷、高效的医疗服务，连接优质医疗资源，打造一站式医疗服务平台。
                    </p>
                    <p class="text-gray-600 mb-8">
                        我们拥有一支由经验丰富的医生、技术专家和服务团队组成的专业队伍，致力于为每一位患者提供最优质的医疗体验。
                    </p>

                    <div class="grid grid-cols-2 gap-6 mb-8">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-user-md text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">专业医生</h4>
                                <p class="text-gray-500 text-sm">500+ 专家团队</p>
                            </div>
                        </div>

                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-hospital-o text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">合作医院</h4>
                                <p class="text-gray-500 text-sm">50+ 三甲医院</p>
                            </div>
                        </div>

                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-user text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">服务患者</h4>
                                <p class="text-gray-500 text-sm">100万+ 用户</p>
                            </div>
                        </div>

                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-star text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">满意度</h4>
                                <p class="text-gray-500 text-sm">98% 好评率</p>
                            </div>
                        </div>
                    </div>

                    <button class="px-8 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
                        了解更多
                    </button>
                </div>

                <div class="relative">
                    <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl">
                        <img src="https://picsum.photos/800/600?random=7" alt="医院环境" class="w-full h-auto">
                    </div>
                    <div class="absolute -bottom-6 -right-6 w-40 h-40 bg-secondary/20 rounded-full -z-10 blur-3xl"></div>
                    <div class="absolute -top-6 -left-6 w-40 h-40 bg-primary/20 rounded-full -z-10 blur-3xl"></div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center mb-4">
                    <i class="fa fa-heartbeat text-primary text-3xl mr-2"></i>
                    <span class="text-xl font-bold">健康桥</span>
                </div>
                <p class="text-gray-400 mb-4">
                    连接优质医疗资源，提供便捷医疗服务。
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weixin text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-qq text-xl"></i>
                    </a>
                </div>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                <ul class="space-y-2">
                    <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                    <li><a href="#departments" class="text-gray-400 hover:text-white transition-colors">科室导航</a></li>
                    <li><a href="#doctors" class="text-gray-400 hover:text-white transition-colors">医生团队</a></li>
                    <li><a href="#appointment" class="text-gray-400 hover:text-white transition-colors">在线预约</a></li>
                    <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">服务支持</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">预约指南</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">用户协议</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">投诉建议</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                <ul class="space-y-2">
                    <li class="flex items-center">
                        <i class="fa fa-map-marker text-primary mr-2"></i>
                        <span class="text-gray-400">北京市海淀区中关村大街1号</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-phone text-primary mr-2"></i>
                        <span class="text-gray-400">400-123-4567</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-envelope text-primary mr-2"></i>
                        <span class="text-gray-400">service@healthbridge.com</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-clock-o text-primary mr-2"></i>
                        <span class="text-gray-400">周一至周日 8:00-20:00</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500 text-sm">
            <p>© 2025 健康桥医疗平台 版权所有 | 京ICP备12345678号</p>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('shadow-md');
            navbar.classList.remove('bg-white/90');
            navbar.classList.add('bg-white');
        } else {
            navbar.classList.remove('shadow-md');
            navbar.classList.add('bg-white/90');
            navbar.classList.remove('bg-white');
        }
    });

    // 移动端菜单切换
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');

    mobileMenuBtn.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });

    // 登录/注册模态框
    const loginBtn = document.getElementById('loginBtn');
    const registerBtn = document.getElementById('registerBtn');
    const authModal = document.getElementById('authModal');
    const modalOverlay = document.getElementById('modalOverlay');
    const loginTab = document.getElementById('loginTab');
    const registerTab = document.getElementById('registerTab');
    const loginForm = document.getElementById('loginForm');
    const registerForm = document.getElementById('registerForm');

    function openModal() {
        authModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        authModal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    loginBtn.addEventListener('click', openModal);
    registerBtn.addEventListener('click', openModal);
    modalOverlay.addEventListener('click', closeModal);

    loginTab.addEventListener('click', () => {
        loginTab.classList.add('text-primary', 'border-primary');
        loginTab.classList.remove('text-gray-500', 'border-transparent');
        registerTab.classList.remove('text-primary', 'border-primary');
        registerTab.classList.add('text-gray-500', 'border-transparent');
        loginForm.classList.remove('hidden');
        registerForm.classList.add('hidden');
    });

    registerTab.addEventListener('click', () => {
        registerTab.classList.add('text-primary', 'border-primary');
        registerTab.classList.remove('text-gray-500', 'border-transparent');
        loginTab.classList.remove('text-primary', 'border-primary');
        loginTab.classList.add('text-gray-500', 'border-transparent');
        registerForm.classList.remove('hidden');
        loginForm.classList.add('hidden');
    });

    // 支付成功模态框
    const payBtn = document.getElementById('payBtn');
    const successModal = document.getElementById('successModal');
    const closeSuccessBtn = document.getElementById('closeSuccessBtn');

    payBtn.addEventListener('click', () => {
        successModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    });

    closeSuccessBtn.addEventListener('click', () => {
        successModal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });

                // 关闭移动端菜单
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }
            }
        });
    });

    // 图表初始化
    document.addEventListener('DOMContentLoaded', () => {
        // 科室预约量图表
        const departmentCtx = document.getElementById('departmentChart').getContext('2d');
        new Chart(departmentCtx, {
            type: 'bar',
            data: {
                labels: ['心内科', '呼吸科', '消化科', '神经内科', '骨科', '儿科'],
                datasets: [{
                    label: '本月预约量',
                    data: [1250, 980, 1120, 850, 760, 1430],
                    backgroundColor: [
                        'rgba(22, 93, 255, 0.7)',
                        'rgba(54, 207, 201, 0.7)',
                        'rgba(255, 125, 0, 0.7)',
                        'rgba(111, 92, 255, 0.7)',
                        'rgba(255, 82, 82, 0.7)',
                        'rgba(45, 184, 156, 0.7)'
                    ],
                    borderColor: [
                        'rgba(22, 93, 255, 1)',
                        'rgba(54, 207, 201, 1)',
                        'rgba(255, 125, 0, 1)',
                        'rgba(111, 92, 255, 1)',
                        'rgba(255, 82, 82, 1)',
                        'rgba(45, 184, 156, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 医生工作量图表
        const doctorCtx = document.getElementById('doctorChart').getContext('2d');
        new Chart(doctorCtx, {
            type: 'line',
            data: {
                labels: ['张医生', '李医生', '王医生', '赵医生', '刘医生'],
                datasets: [{
                    label: '诊疗患者数',
                    data: [280, 250, 230, 210, 190],
                    backgroundColor: 'rgba(22, 93, 255, 0.2)',
                    borderColor: 'rgba(22, 93, 255, 1)',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 满意度分析图表
        const satisfactionCtx = document.getElementById('satisfactionChart').getContext('2d');
        new Chart(satisfactionCtx, {
            type: 'doughnut',
            data: {
                labels: ['非常满意', '满意', '一般', '不满意'],
                datasets: [{
                    data: [65, 25, 8, 2],
                    backgroundColor: [
                        'rgba(45, 184, 156, 0.8)',
                        'rgba(22, 93, 255, 0.8)',
                        'rgba(255, 125, 0, 0.8)',
                        'rgba(255, 82, 82, 0.8)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // 高峰时段图表
        const peakHoursCtx = document.getElementById('peakHoursChart').getContext('2d');
        new Chart(peakHoursCtx, {
            type: 'line',
            data: {
                labels: ['8:00', '9:00', '10:00', '11:00', '14:00', '15:00', '16:00'],
                datasets: [{
                    label: '预约人数',
                    data: [120, 190, 210, 180, 150, 170, 130],
                    backgroundColor: 'rgba(54, 207, 201, 0.2)',
                    borderColor: 'rgba(54, 207, 201, 1)',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>
</body>
</html>